<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>进度条组件</title>
</head>
<style>
    .progressBorder {
        border: rgb(139, 255, 255) 3px solid;
        background: #ffffff;
        height: 20px;
        display: flex;
        width: 100%;
    }

    #progressBg {
        flex-direction: column;
        background-color: rgb(52, 155, 155);
        width: 1%;
        height: 20px;
    }
    #progressNum{
        z-index: 200;
        width: 100%;
        color: #000000;
        text-align: center;
    }
</style>

<body>
    <div class="progressBorder">
        <div id="progressNum">0%</div>
        <div id="progressBg"></div>
    </div>
</body>

<script>
    var progressNum = 1
    var progressText = 1

    var setTimeVal = setInterval(function () {
        progressNum = progressNum + 1
        console.log(progressNum)
        document.getElementById('progressBg').style.width = progressNum + '%'
        document.getElementById('progressNum').innerText = progressNum + '%'
        if(progressNum > 99){
            document.getElementById('progressNum').innerText = '加载完成！'
            clearInterval(setTimeVal)
        }
    }, 300);

</script>

</html>